import React, { Component } from 'react'
import Api from '../../../api/api'
import { Button, message, Modal } from 'antd'

export default class Assistant extends Component{
  constructor(props) {
    super(props)
    this.state = {
      teacher: {},
      visible: false
    }
  }
  
  componentDidMount() {
    this.getTeacher()
    setTimeout(() => {
      let cH = document.getElementById('p_content').clientHeight
      let bH = document.body.clientHeight - 180
      let t = document.getElementById('footer')
      if(cH >= bH || bH<=800) {
        t.style.position= 'relative'
      }
    }, 300);
  }

  getTeacher() {
    Api.getTeacherByA().then(res => {
      if(res.code === 20000) {
        this.setState({
          teacher: res.data
        })
      } else {
        message.error(res.msg)
      }
    })
  }

  deleTeacher() {
    Api.deleTeacherByA().then(res => {
      if(res.code === 20000) {
        message.success('解除成功!')
        setTimeout(() => {
          this.getTeacher() 
        }, 1000);
      } else {
        message.error(res.msg)
      }
    })
  }

  handleCancel() {
    this.setState({
      visible: false
    })
  }

  handleOk() {
    debugger
    this.setState({
      visible: false
    }, ()=> this.deleTeacher())
  }

  render() {
    let teacher = this.state.teacher
    return (
      <div>
        {
          teacher.hasTeacher > 0 ? <div style={{display: 'flex'}}>
          <span style={{marginRight: '10px'}}>我的老师:</span>
          <div style={{display: 'flex'}}>
            <div style={{float: 'left', textAlign: 'center'}}>
              <img src={teacher.teacherPhoto} style={{width: '100px', height: '100px'}} /><br/>
              <Button onClick={()=> this.setState({visible: true})}>解除绑定</Button>
            </div>
            <div style={{marginLeft: '10px', lineHeight: '26px'}}>
              <p>{teacher.teacherName}</p>
              <p>老师 | {teacher.teacherSubjectName}</p>
            </div>
          </div>
        </div> : <p style={{textAlign: 'center'}}>暂无关联信息</p>
        }
        <Modal
          visible={this.state.visible}
          onOk={this.handleOk.bind(this)}
          okText="确定"
          cancelText="取消"
          onCancel={()=> this.setState({visible: false})}
        >
          <p style={{textAlign: 'center', lineHeight: '30px', color: '#666'}}>是否解除绑定?</p>
        </Modal>
      </div>
    )
  }
}